<!--下拉选择，多级缩进的模式-->
<template>
  <el-select
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
  >
    <el-option-group
      v-for="group in optionList"
      :key="group.label"
      :label="group.label"
    >
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="'　' + item.label"
        :value="item.value"
        :disabled="item.disabled"
      >
      </el-option>
    </el-option-group>
  </el-select>
</template>

<script setup lang="ts" generic="T extends object">
  import { computed } from 'vue'
  import type { IFormItemProps } from '../map'
  import { itemController, loadController } from '../map'

  defineOptions({
    name: 'nf-el-from-select-group',
    inheritAttrs: false,
  })

  /**
   * 数据格式：
   * * 原生递进
   * * 一个数组做标记
   */
  
  // 定义 props
  const props = withDefaults(defineProps<IFormItemProps<T> & {
    collapseTags?: boolean,
    collapseTagsTooltip?: boolean
  }>(), {
    meta: () => {
      return {
        colName: ''
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true,
    collapseTags: true, // 多选
    collapseTagsTooltip: true
  })
  const { value  } = itemController(props)

  // 设置默认值
  if (props.meta.defValue) {
    value.value = props.meta.defValue
  }

  const multiple = computed (() => props.meta.controlType === 163)

  // 从后端获取数据
  const { loadDict } = loadController(props)
  loadDict()
 
</script>
